import useSearch from '@renderer/hooks/useSearch'
import { ArrowRight, Config } from '@icon-park/react'
import React, { useEffect, useState } from 'react'
import { Modal } from 'antd'
import useShortcut from '@renderer/hooks/useShortCut'
import { useStore } from '@renderer/store/useStore'
import { Switch } from 'antd'
import useCodeSelect from '@renderer/hooks/useCodeSelect'
import styles from './index.module.scss'

export default function Search() {
  const { searchText, handleSearchChange } = useSearch()
  const { data } = useCodeSelect()
  // const searchRef = useRef<HTMLDivElement>(null)
  const [isModalOpen, setIsModalOpen] = useState(false)
  const shortcut = useStore((state) => state.shortcut)
  const setShortcut = useStore((state) => state.setShortcut)
  const webPageList = useStore((state) => state.webPageList)
  const selectPageList = useStore((state) => state.selectPageList)
  const setSelectPageList = useStore((state) => state.setSelectPageList)
  const selfStarting = useStore((state) => state.selfStarting)
  const setSelfStarting = useStore((state) => state.setSelfStarting)
  const { register } = useShortcut()
  useEffect(() => {
    // searchRef?.current?.addEventListener('mouseover', (_e: Event) => {
    //   window.api.ignoreMouseEvent(false)
    // })
    // document.body.addEventListener('mouseover', (e: Event) => {
    //   console.log(e.target)
    //   if (e.target === document.body) {
    //     window.api.ignoreMouseEvent(true)
    //   }
    // })

    if (shortcut) {
      register('search', shortcut)
      window.api.autoLaunch((value) => {
        setSelfStarting(value)
      })
    }
  }, [])
  const showModal = () => {
    window.api.setWindowSize(582)
    setIsModalOpen(true)
  }

  const handleCancel = () => {
    if (data.length > 0) {
      const MaxHeight = 582
      const currentHeight = Math.min(MaxHeight, data.length * 74 + 30 + 82)
      window.api.setWindowSize(currentHeight)
    } else {
      window.api.setWindowSize(82)
    }
    setIsModalOpen(false)
  }

  function configureShortcutKeys(event: React.KeyboardEvent) {
    event.preventDefault()
    event.stopPropagation()

    let cut = ''

    if (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) {
      if (event.ctrlKey) cut += 'Ctrl+'
      if (event.shiftKey) cut += 'Shift+'
      if (event.altKey) cut += 'Alt+'
      if (event.metaKey) cut += 'Cmd+'

      // 确保只有一个 key 被添加
      if (event.key !== 'Alt' && event.key !== 'Shift' && event.key !== 'Control') {
        if (event.key === ' ') {
          cut += 'Space'
        } else {
          cut += event.key.toUpperCase()
        }
        setShortcut(cut)
        register('search', cut)
      }
    }
  }

  function onChange(id: number) {
    if (selectPageList.includes(id)) {
      setSelectPageList(selectPageList.filter((item) => item !== id))
    } else {
      setSelectPageList([...selectPageList, id])
    }
  }

  return (
    <>
      <div className={`p-[15px]  bg-slate-50 drag`}>
        <section className={`bg-slate-200 p-3 rounded-lg no-drag flex items-center`}>
          <Config
            theme="outline"
            size="24"
            fill="#333"
            className={'mr-2 cursor-pointer'}
            onClick={() => {
              showModal()
            }}
          />
          <input
            className={'w-full outline-none text-xl text-slate-600 bg-slate-200'}
            type="text"
            autoFocus={true}
            value={searchText}
            onChange={handleSearchChange}
            placeholder={'Search...'}
          />
        </section>
      </div>
      <Modal
        title="设置"
        open={isModalOpen}
        onCancel={handleCancel}
        mask={false}
        maskClosable={false}
        footer={null}
        classNames={{ wrapper: styles.searchBox }}
      >
        <div className={'flex justify-between h-[50px] items-center bg-custom-hui box-border px-2'}>
          <div className={''}>快捷键配置</div>
          <input
            value={shortcut}
            onKeyDown={configureShortcutKeys}
            readOnly={true}
            className={'px-2 box-border'}
          />
        </div>
        <div
          className={
            'flex justify-between  h-[50px]  items-center bg-custom-hui box-border px-2 mt-2'
          }
        >
          <div className={''}>代码片段配置</div>
          <ArrowRight
            theme="outline"
            size="24"
            fill="#333"
            className={'cursor-pointer'}
            onClick={() => {
              window.api.openConfigWindow()
            }}
          />
        </div>
        <div
          className={
            'flex justify-between  h-[50px]  items-center bg-custom-hui box-border px-2 mt-2'
          }
        >
          <div className={''}>开机自启</div>
          <Switch
            value={selfStarting}
            onChange={() => {
              window.api.setAutoLaunch(!selfStarting)
              setSelfStarting(!selfStarting)
            }}
          />
        </div>
        <div className={'px-2 bg-custom-hui mt-2 box-border'}>
          <div>网页快开设置</div>
          <div className={'mt-2'}>
            {webPageList.map((item) => (
              <div key={item.id} className={'flex justify-between items- mt-2'}>
                <div>
                  <div>{item.title}</div>
                  <div>{item.content}</div>
                </div>
                <Switch
                  value={selectPageList.includes(item.id)}
                  onChange={() => {
                    onChange(item.id)
                  }}
                />
              </div>
            ))}
          </div>
        </div>
      </Modal>
    </>
  )
}
